<template>
  <div>
    <div id="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  name: "chartTest",
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $.getJSON(
        "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full",
        function (geoJson) {
          echarts.registerMap("china-map", geoJson);
          var option = {
            backgroundColor: "#020933",
            title: {
              top: 20,
              text: "中国地图",
              subtext: "",
              x: "center",
              textStyle: {
                color: "#ccc",
              },
            },
            tooltip: {},
            series: [
              {
                type: "map",
                label: {
                  normal: {
                    fontSize: 6,
                    show: true,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    borderColor: "#2ab8ff",
                    borderWidth: 1.5,
                    areaColor: "#12235c",
                  },
                  emphasis: {
                    areaColor: "#2AB8FF",
                    borderWidth: 0,
                    color: "green",
                  },
                },
                zoom: 1.1,
                map: "china-map",
              },
            ],
          };
          var myChart = echarts.init(document.getElementById("chart"));
          myChart.setOption(option);
        }
      );
    },
  },
};
</script>

<style scoped>
#chart {
  width: 500px;
  height: 400px;
}
</style>
